
	<template>

			<view class="sickBody" :style="{top: statusbarH+'rpx'}">
			  <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll">
			    <view class="parentDom">
			      <!-- <view :style="{ height: sickAllList.length * 40 + 'px' }"></view> -->
			      <view :style="{ height: screenHeight + 'px' }"></view>
			      <view class="positionRelative" :style="{ transform: getTransform }">
			        <view v-for="item in visibleData" :key="item.id" class="height40">{{
			          item.name
			        }}</view>
			      </view>
			    </view>
			  </scroll-view>
			</view>

	  
	</template>
<script>
	
	let testdata = [];
	for (let i = 0; i < 300; i++) {
	  testdata.push({ id: i, name: '疾病' + i });
	}
	export default {
	  data() {
	    return {
				statusbarH: 0,
				itemSize: 40,
	      searchList: [],
	      screenHeight: 0,
	      startOffset: 0,
	      start: 0,
	      end: 20,
	      scrollTData: 0,
	      count: 20,
	      remain: 8
	      // testData: []
	    };
	  },
	  computed: {
	    screenHeight() {
	      return testdata.length * Number(this.itemSize) + 100;
	    },
	    // 前面预留几个
	    prevCount() {
	      return Math.min(this.start, this.remain);
	    },
	    // 后面预留几个
	    nextCount() {
	      return Math.min(this.remain, this.end);
	    },
	    getTransform() {
	      return `translate3d(0,${this.startOffset}px,0)`;
	    },
	    visibleData() {
	      return testdata.slice(this.start, Math.min(this.end, testdata.length));
	    }
	  },
	  mounted() {
	    this.sickAllList = testdata;
	  },
	  methods: {
	    scroll(e) {
	      this.scrollTData = e.target.scrollTop;
	      this.scrollThrottle();
	    },
	    /* eslint-disable */
	    scrollThrottle() {
				let scrollTop = this.scrollTData; // e.target.scrollTop;
				// 此时的开始索引
				this.start =
				  Math.floor(scrollTop / this.itemSize) - this.prevCount >= 0
				    ? Math.floor(scrollTop / this.itemSize) - this.prevCount
				    : 0;
				// 此时的结束索引
				this.end = Number(this.start) + Number(this.count) + Number(this.nextCount);
				// 此时的偏移量
				// console.log('位置', this.start, this.end);
				this.startOffset = Number(this.start) * Number(this.itemSize);
			},
	  }
	};
</script>
<style lang="scss" scoped>
	.sickBody {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background: #f4f4f4;
	  z-index: 9999;
		border: 1px solid red;
	}
	.scroll-Y {
	  height: 100%;
	  overflow-y: scroll;
	}
	.height40 {
	  height: 39px;
	  line-height: 39px;
	  width: 100%;
	  overflow: hidden;
	  border-bottom: 1px solid #d2d2d2;
	}
	.positionRelative {
	  width: 92%;
	  margin: 0 3%;
	  position: absolute;
	  left: 0;
	  top: 0;
	  font-size: 32rpx;
	  padding-bottom: 300rpx;
	  //   height: 100%;
	  //   width: 100%;
	}
	.parentDom {
	  position: relative;
	}
</style>
